* {
  --theme-blue: #3B78D6;
  --theme-pink: #DD4E7C;
  --label: #000000;
  --secondary-label: #3C3C43;
  --tertiary-label: #3C3C43;

  --red: #e54d42;
  --orange: #f37b1d;
  --yellow: #fbbd08;
  --olive: #8dc63f;
  --green: #39b54a;
  --cyan: #1cbbb4;
  --blue: #0081ff;
  --purple: #6739b6;
  --mauve: #9c26b0;
  --pink: #e03997;
  --brown: #a5673f;
  --grey: #8799a3;
  --black: #333333;
  --darkGray: #666666;
  --gray: #aaaaaa;
  --ghostWhite: #f1f1f1;
  --white: #ffffff;
  --redLight: #fadbd9;
  --orangeLight: #fde6d2;
  --yellowLight: #fef2ce;
  --oliveLight: #e8f4d9;
  --greenLight: #d7f0db;
  --cyanLight: #d2f1f0;
  --blueLight: #cce6ff;
  --purpleLight: #e1d7f0;
  --mauveLight: #ebd4ef;
  --pinkLight: #f9d7ea;
  --brownLight: #ede1d9;
  --greyLight: #e7ebed;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*::-webkit-scrollbar { /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

*::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.3);
}

*::-webkit-scrollbar-track { /*滚动条里面轨道*/
  /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);*/
  background: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: transparent;
  position: relative;
  user-select: none;
  -webkit-app-region: drag;
  font-family: sans-serif;
}

.bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.drag {
  -webkit-app-region: drag;
}

.no-drag {
  -webkit-app-region: no-drag;
}

.cursor-pointer {
  cursor: pointer;
}

.user-select-text {
  user-select: text;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none
}

a:link {
  color: #ffffff;
}

a:visited {
  color: #ffffff;
}

a, button, select {
  cursor: pointer;
}

a, button, select, input {
  -webkit-app-region: no-drag;
}

input, button, select {
  border: none;
  outline: none;
  border-radius: 0;
  margin: 2px 0;
  padding: 0 12px;
  background-color: #f1f1f1;
  vertical-align: middle;
  height: 32px;
}

button {
  &:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)));
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  }

  &:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  }
}

#app {
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.main {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--black);
  border:1px solid var(--darkGray);
  color: var(--white);
}